import { useEffect } from 'react';
import { getGeovisInitStyle } from '@gvol-org/geovis-mapbox-sdk';
import { SMap } from './map-kit';
import type { ISMap, ISMapOptions } from './map-kit';

export type IMapProps = Pick<ISMapOptions, 'dispatch'> & {
  onReady?: (map: ISMap) => void;
};

export const Map = (props: IMapProps) => {
  useEffect(() => {
    const init = async () => {
      const style = getGeovisInitStyle() as any;
      style.fog = {
        color: 'rgb(186, 210, 235)',
        'high-color': 'rgb(36, 92, 223)',
        'horizon-blend': 0.02,
        range: [0.5, 10],
        'space-color': ['interpolate', ['linear'], ['zoom'], 4, '#010b19', 7, '#367ab9'],
        'star-intensity': ['interpolate', ['linear'], ['zoom'], 5, 0.35, 6, 0],
      };
      const smap = new SMap({ container: 'map', style, hash: false, dispatch: props.dispatch });
      smap.once('style.load', () => props.onReady?.(smap));
    };
    init();
  }, []);

  return <div id="map" />;
};
